/**
 * 
 */
 let inputAll = document.querySelectorAll('.cont-bo div input')
 let imgAll = document.querySelectorAll('.cont-bo div img')


/**
 * 1.需求:输入数据,失去焦点时, 判断输入的长度大于6和小于12,显示提示p
 * 事件:blur
 * 
 */

inputAll.forEach(function(v){

    v.addEventListener('blur',function(){
        if(v.value.length >=6 && v.value.length <=12){
            v.nextElementSibling.style.display = "none";
        }else{
            v.nextElementSibling.style.display = "block";
        }
    })
})



/**
 * 2.需求:输入的长度大于0,显示 x ,显示叉叉和边框颜色
 * 事件:input
 */
inputAll.forEach(function(v){

    v.addEventListener('input',function(){
        if(v.value.length >0){
            v.closest('div').lastElementChild.style.display = "block";
            v.closest('div').firstElementChild.style.border = '1px solid #00bdff'
        }else{
            console.log(12);
            v.closest('div').lastElementChild.style.display = "none";
            // v.closest('div').firstElementChild.style.border = '1px solid #ccc'
            v.closest('div').firstElementChild.style.border = '1px solid #ccc'
        }
    })
})


/**
 * 3.需求:点击 x ,清除内容
 */


imgAll.forEach(function(v){
    v.addEventListener('click',function(){
        v.closest('div').firstElementChild.value = ''
    })
    //console.log(v);
    
})




/**
 * 4.需求:勾选复选框 (checked),注册按钮改变颜色,
 * 
 */
let inputCheck = document.querySelector('#check')
let subBtn = document.querySelector('.subBtn')

//设置点击次数
let index = 0;
inputCheck.addEventListener('click',function(){
    ++index;
    console.log(index);
    if(index %2 !== 0){
        inputCheck.checked = true;
        subBtn.style.color = '#fff';
        subBtn.style.backgroundColor = '#00bdff';
    }else{
        inputCheck.checked = false;
        subBtn.style.color = '#000';
        subBtn.style.backgroundColor = '#ccc';
    }
})


/**
 * 5.点击 codeBtn 获取验证码,倒计时时间60
 */
let codeBtn = document.querySelector('.codeBtn')

codeBtn.addEventListener('click',function(){
    //
    let time = 60;
    setInterval(function(){
        --time;
        if (time === 0) {
            location.href = '../page/login.html'
        }else{
            codeBtn.style.disabled = 'true'
            codeBtn.textContent = `倒计时${time} 秒`
        }
    },1000)

})



/**
 * canvas插件
 */

$(document).ready(function(){
    var stars=1000;  /*星星的密集程度，数字越大越多*/
    var $stars=$(".stars");
    var r=800;   /*星星的看起来的距离,值越大越远,可自行调制到自己满意的样子*/
    for(var i=0;i<stars;i++){
      var $star=$("<div/>").addClass("star");
      $stars.append($star);
    }
    $(".star").each(function(){
      var cur=$(this);
      var s=0.2+(Math.random()*1);
      var curR=r+(Math.random()*300);
      cur.css({ 
        transformOrigin:"0 0 "+curR+"px",
        transform:" translate3d(0,0,-"+curR+"px) rotateY("+(Math.random()*360)+"deg) rotateX("+(Math.random()*-50)+"deg) scale("+s+","+s+")"
         
      })
    })
  })


